<template>

  <div>
    <div>
      <el-button type="primary" icon="el-icon-plus" @click="addItem">添加</el-button>
      <el-button type="success" icon="el-icon-check" @click="onSubmit('form')">保存</el-button>
    </div>
    <div v-if="form.length >= 1">
      <!-- <el-scrollbar style="height:610px;padding-top:20px;" > -->
      <div v-for="(item,index) in form" :key="index">
        <el-form ref="form" :inline="true" label-position="top" size="mini" :rules="rules" :model="item" label-width="100px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="item.title" style="width:120px;" placeholder="请输入分类标题" />
          </el-form-item>
          <el-form-item label="封面" prop="thumb">
            <el-upload
              class="avatar-uploader"
              list-type="picture-card"
              :action="upload_url+'?id='+index"
              :show-file-list="false"
              :before-upload="$beforeAvatarUpload"
              :on-success="handleAvatarSuccess_thumb"
            >
              <img v-if="item.thumb" :src="item.thumb">
              <i v-else class="el-icon-plus" />
            </el-upload>
          </el-form-item>
          <el-form-item label="跳转地址" prop="url">
            <el-input v-model="item.url" style="width:120px;" placeholder="请输入跳转地址" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="item.sort" style="width:80px;" placeholder="请输入排序" type="number" required />
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="item.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="操作">
            <el-tooltip class="item" effect="dark" content="删除此按钮 " placement="bottom">
              <el-button icon="el-icon-close" circle @click="removeItem(index,item.id)" />
            </el-tooltip>

          </el-form-item>
        </el-form>
      </div>

    <!-- </el-scrollbar> -->
    </div>
    <div v-else style="padding:20px 0px;">您还没有设置搜索按钮，点击上方按钮开始添加！</div>
  </div>
</template>

<script>
export default {
  name: 'SearchEdit',
  data() {
    return {
      cate_id: 0,
      form: [
        {
          id: 0,
          sort: 0,
          cate_id: this.cate_id,
          title: '',
          url: '',
          thumb: '',
          status: true
        }
      ],

      upload_url: '',

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        thumb: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序位置', trigger: 'blur' }
        ],
        // url: [
        //   { required: true, message: '请输入跳转地址', trigger: 'blur' }
        // ]
      }
    }
  },
  mounted() {
    this.upload_url = process.env.VUE_APP_BASE_API + '/pub/Upload/upload'
    this.init_into()
  },
  methods: {
    // 添加
    addItem() {
      this.form.push({
        id: 0,
        sort: 0,
        cate_id: this.cate_id,
        title: '',
        url: '',
        thumb: '',
        status: true
      })
    },
    // 移除
    removeItem(index, id) {
      this.$msg_confirm().then(e => {
        if (e) {
          // 如果id存在 就发送后端删除数据
          if (id) {
            this.get('/admin/Ad/del?id=' + id, this.form, 'POST').then(e => {
              this.form.splice(index, 1)
            })
          } else {
            // 如果id不存在直接删除数组中的数据
            this.form.splice(index, 1)
          }
        }
      })
    },
    // 封面上传完成
    handleAvatarSuccess_thumb(res, file) {
      var index = res.data.id
      // 根据index值 更新图片参数
      this.form[index].thumb = file.response.data.path
      // console.log(this.form)
    },
    // 提交
    onSubmit(formName) {
      const form = this.form
      console.log(form)
      var flag = true
      // 验证参数是否为空
      for (var i = 0; i < this.form.length; i++) {
        this.$refs[formName][i].validate((valid) => {
          if (!valid) {
            console.log('error submit!!')
            flag = false
          }
        })
      }
      // 参数验证成功 提交保存数据
      if (flag) {
        this.get('/admin/Ad/saveAll', { 'data': form }, 'POST').then(e => {
          this.$message({
            message: '保存成功',
            type: 'success',
            offset: 80
          })
          console.log('submit!')
          
        })
      }
    },
    // 返回
    bk() {
      this.$router.back()
    },
    // 获取当前数据
    init_into() {
      this.get('/admin/Ad/index', { 'cat_name': '搜索按钮' }, 'POST').then(e => {
        this.cate_id = e.list.id
        // status==1 true  status==2 false
        e.list.ad.forEach(function(item, index) {
          e.list.ad[index].status = e.list.ad[index].status === 1
        })
        this.form = e.list.ad
        console.log(this.form)
      })
    }
  }
}
</script>
<style>

.el-upload--picture-card{
    width: 80px;
    height: 70px;
    line-height:80px;
}
.el-upload--picture-card img{
    width: 100%;
}

</style>
